<StackLayout class="p-10">
  <Label [text]="'LOVE_TECH' | translate" textWrap="true" class="love-tech"></Label>
  <Label [text]="'SUCCESS_MSG' | translate" textWrap="true"></Label>
  <Label [text]="'ABOUT_REWARD' | translate" textWrap="true"></Label>

  <TextField [(ngModel)]="newName" [hint]="'INPUT_HINT' | translate" autocorrect="false" autocapitalizationType="none"></TextField>
  <Button [text]="'ADD_BTN_TEXT' | translate" (tap)="addName()" class="btn btn-primary"></Button>

  <ListView [items]="names$ | async" row="1" colSpan="2" height="250" class="list-group">
    <template let-name="item" let-odd="odd" let-even="even">
      <StackLayout [class.odd]="odd" [class.even]="even" class="list-group-item">
        <Label [text]="name"></Label>
      </StackLayout>
    </template>
  </ListView>

  <Button (tap)="readAbout()" text="Read all about it" class="btn btn-outline"></Button>
</StackLayout>
